<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        width: 200vw;
        height: 200vh;
      }

      #d01 {
        height: 500px;
        width: 235px;
        border: solid #eee;
        margin-top: 60px;
        margin-left: 60px;
        position: relative;
      }

      #txt {
        /* border: 1px solid yellow; */
      }

      .c {
        outline: 1px solid #f258;
        position: fixed;
      }

      .r {
        outline: 1px dashed #13f6;
        position: fixed;
        background-color: #13f2;
      }
    </style>
  </head>

  <body>
    <div style="position: fixed; top: 10px; left: 14px">
      <a href="#span">ffff</a>
      <button onclick="fn()">click!</button>
    </div>
    <div id="d01">
      <span style="color: blue">short span!</span
      ><span id="txt">This example demonstrates how bounding client rect is changing when document is scrolled. </span>
    </div>
    <script>
      /** @type {HTMLElement} */
      const anchor = document.querySelector('#txt');

      /**
       * @param {{x,y,width,height}} rect
       */
      function addRec(rect, className) {
        const { x, y, width, height } = rect;
        const ele = document.createElement('div');
        ele.classList.add(className);
        ele.style = `                
                top:${y}px;
                left:${x}px;
                width:${width}px;
                height:${height}px;`;

        document.documentElement.append(ele);
        setTimeout(() => {
          document.documentElement.removeChild(ele);
        }, 2500);
      }

      function fn() {
        const cRec = anchor.getBoundingClientRect();
        const rects = anchor.getClientRects();
        console.log('add len:', rects.length);
        addRec(cRec, 'c');
        for (const rec of rects) {
          addRec(rec, 'r');
        }
      }
    </script>
    <div style="height: 800px"></div>
    <span id="span">span</span>
  </body>
</html>
